<template>
    <div>

         <div class="sn-tofixed">
                <div class="sn-pro-scroll" id="sn-scroll" style="touch-action: none;" :class="{'showout': top > 60}">
                    <!-- <search :num='2'></search> -->
                    <a href="#/needshop/2" v-if="$route.params.catalogCode == 'search'">
                      <div class="sn-search">
                          <div class="sn-se-inp">
                            <i class="search-icon"></i>
                            <input id="searchIup" v-model="getshoplistNow"  @keyup.13="sear()" type="text" class="searchInp" placeholder="搜索你想要的商品" value="">

                          </div>
                        
                      </div>
                    </a>
                    <search  :num='2' v-if="$route.params.catalogCode != 'search'"></search>

                    <div class="shoplist-poxf">

                        <ul v-if="$route.params.catalogCode != 'search'" class="swiper-wrapper sn-nav" :class="{'w100': changetabClick.length <= 3}" style=" transition-timing-function: cubic-bezier(0.1, 0.57, 0.1, 1); transition-duration: 0ms;" >
                               
                                <swiper :options="swiperOption3" >
                                    <!-- 不是搜索的时候出现全部 -->
                                    <swiper-slide :class="{'silder-li-1' : changetabClick.length == 1,'silder-li-2' : changetabClick.length == 2, 'silder-li-3' : changetabClick.length == 3}">
                                        <li class="swiper-slide" :class="{'curr': /all/.test($route.params.catalogCode)}">  <!-- @click="fetchDate('all')" -->
                                            <router-link  :to="{ path:'/shoplist/'+$route.params.catalogCode.replace('all','')+'all'}" replace>
                                                全部
                                            </router-link>
                                        </li>
                                    </swiper-slide>

                                    <swiper-slide  v-for="(item, index) in changetabClick" :key="item.id" :class="{'silder-li-1' : changetabClick.length == 1, 'silder-li-2' : changetabClick.length == 2, 'silder-li-3' : changetabClick.length == 3}">
                                        <li class="swiper-slide" :class="{'curr': $route.params.catalogCode == item.catalogCode}"  :data-code="item.catalogCode">
                                            <router-link  :to="{name:'shoplist', params:{catalogCode: item.catalogCode}}" replace>
                                                {{item.catalogName}}
                                            </router-link>

                                        </li>
                                    </swiper-slide>
                                      <!-- <div class="swiper-pagination3" slot="pagination"></div> -->
                                </swiper>
                        </ul>
                        <div class="select-down" :class="{'active': down}" @click="selectShow" v-if="$route.params.catalogCode != 'search' && changetabClick.length > 3">
                        </div>
                        <div style="clear:both"></div>
                        <!-- 下拉框 -->
                        <div class="select-show" v-show="down">
                            <ul>
                       
                                 <li class="swiper-slide" :class="{'curr': /all/.test($route.params.catalogCode)}">  <!-- @click="fetchDate('all')" -->
                                    <router-link  :to="{ path:'/shoplist/'+$route.params.catalogCode.replace('all','')+'all'}" replace>
                                        全部
                                    </router-link>
                                </li>
                               
                                <li v-for="(item, index) in changetabClick" :key="item.id" :class="{'curr': $route.params.catalogCode == item.catalogCode}">
                                    <router-link  :to="{name:'shoplist', params:{catalogCode: item.catalogCode}}" replace>
                                        <span v-text="item.catalogName.length>=5?item.catalogName.replace(item.catalogName.substring(2,item.catalogName.length-2),'..') : item.catalogName"></span>
                                    </router-link>
                                </li>
                            </ul>
                        </div>
                        <!-- 遮挡层 -->
                        <div class="select-mask" v-show="down" @touchstart.prevent="">
                            
                        </div>

                    </div>
                    <!-- 搜索用的 -->
                    
                </div>
             
                <div class="sn-ops" style="transform: translate(0px, 0px);" >
                    <ul class="sn-sort">
                        <li class="complex-sort" :class="{'curr': curr == 'comprehensive' || curr == ''}" @click="order({orderBy:0, name: 'comprehensive'})">综合</li>
                        <li class="sales-sort" :class="{'curr': curr == 'sale'}" data-sort="1" @click="order({orderBy:1, name: 'sale'})">销量</li>
                        <li class="price-sort"  data-sort="2" :class="{'curr': curr == 'price', 'priceAsc': this.orderAsc=='asc', 'priceDesc': this.orderAsc=='desc'}"  @click="order({orderBy: 2,orderAsc: 'asc', name: 'price'})">
                            价格
                            <span class="top" ></span>
                            <span class="bottom"></span>
                        </li>
                    </ul>
                </div>
                <div class="nav-more-cont-bg"></div>
        </div>
        <div class="searchList-wrap" style="transform: translate(0px, 0px);" ref="searchListWrap">
            <ul class="thum-style clearfix">
                <li v-for="(item, index) in listshopdata" class="m-cont list-datail clearfix" data-code="item.cmmdtyCode" :class="(item.className1?item.className1+' ' : '') + item.className" :key="item.id"> <!-- {'item-noinv': (item.availableQty == 0 || item.price <= 0)} -->
                    <div class="o-index-pro-pic">
                        <a :href="'#/detail/'+item.cmmdtyCode+'/'+item.supplierCode">
                            <img alt="" :src="item.src1">
                        </a>
                    </div>
                    <h4 class="o-pro-info">
                        <a :href="'#/detail/'+item.cmmdtyCode+'/'+item.supplierCode">{{item.cmmdtyName}}</a>
                    </h4>
                    <div class="qa-price clearfix" >
                        <i v-if=" item.price > 0"><i class="yen">&yen;</i> {{item.price}}</i><span class="no-line" v-if="item.price > 0 && item.cmmdtyUnit">/{{item.cmmdtyUnit}}</span>
                        <span class="no-line sendFlagStr" v-if="item.sendFlagStr">{{item.sendFlagStr}}</span>
                        <!-- <span v-if="item.basePrice">&yen;{{item.basePrice}}</span> -->
                    </div>
                </li>
            </ul>
            <div v-if="noshop" class="shoplist-nosale">
                <img src="/static/images/nosale.png" alt="">
                <p>没有找到你要的商品哦~</p>
                <a class="noshop-button" href="#/needshop">换个词看看呢</a>

            </div>
        </div>
    </div>
</template>

<script>
    import {  levelCatalog, listshop, getprice, catalog } from '@/service/getData'
    import { swiper, swiperSlide } from 'vue-awesome-swiper'
    import {mapMutations, mapState, mapGetters} from 'vuex'
    import { img } from '../../../../config/env.js'
    import search from "../search/search"
    export default {
        data(){
            return {
                // changetabClick:[],
                changetabClick:[],
                catalogCode:'',
                routeid: 0,
                listshopdata: [],
                top: 0,
                totalPageCount: 0,
                on: true,
                jsonnum: 1,//商品列表接口callback = json+jsonnum
                orderAsc: '',
                curr: '',
                noshop: false,
                showall: false,
                down:false,
                orderBy:0,
                toptext:'',
                tabobj: {
                    num: 0,
                    sw: 0
                },
                tabnum:1,
                time:'',


                swiperOption3: {
                  onSliderMove: (swiper, e) => {
                     if(swiper.swipeDirection ==  'prev' && this.changetabClick.length > 3) {
                        // if(swiper.translate < this.tabobj.sw) {
                           this.time = setTimeout(()=>{
                                clearTimeout(this.time)
                                var num = -this.tabobj.num*this.tabobj.sw+swiper.translate
                                var num1;
                                if(num >= 0 && this.tabobj.num <= 0) {
                                    num1 = 0
                                }else if(num < 0 || this.tabobj.num  > 0){
                                    num1 = num + this.tabobj.sw
                                    this.tabobj.num--;
                                }
                                $('.swiper-container.swiper-container-horizontal').css({
                                  'transform': 'translate3d('+num1+'px, 0px, 0px)'
                                })

                            },50)
                            
                        // }
                            
                        // this.tabnum++
                     }else if(swiper.swipeDirection ==  'next' && this.changetabClick.length > 3){
                        this.time = setTimeout(()=>{
                            clearTimeout(this.time)
                            var num = -this.tabobj.num*this.tabobj.sw-swiper.translate
                            var num1 ;
                            if(this.tabobj.num >= this.tabobj.len){
                                num1 = -(this.tabobj.len-2)*this.tabobj.sw
                            }else{
                                num1 = num-this.tabobj.sw
                                this.tabobj.num ++
                            }
                            $('.swiper-container.swiper-container-horizontal').css({
                              'transform': 'translate3d('+num1+'px, 0px, 0px)'
                            })

                        },50)
                     }
                 
                  },
                   
                  pagination: '.swiper-pagination3',
                  slidesPerView:4,
                  paginationClickable: true,
                  index1: 0,
                }
            }
        },
        computed:{
            ...mapGetters({
                getshoplistNow: 'getshoplistNow',
                position: 'position',
                oneHourUp: 'oneHourUp'
            })
        },
        watch: {
          "$route": "fetchDate",
        },    
        mounted() {
            if(this.$route.params.catalogCode != 'search'){

                 if(!this.oneHourUp[0]) {
                     catalog({
                         storeCode: this.position.storeLocation,//
                          _: Math.random()+10000000,
                          wap: '3.2.2'
                      })
                      .then((rep) => {
                              let alldata = rep.resultData;
                              if(!alldata)return;
                               var data1 = this.oneHourFn(alldata.oneHourUp)
                               this.changetabClick.push.apply(this.changetabClick, data1)
                               this.dh(1)    
                      })

                     // this.$route.params.catalogCode.replace('all','')
                 }else{
                    var data1 = this.oneHourFn(this.oneHourUp)
                    this.changetabClick.push.apply(this.changetabClick, data1)
                    this.dh(1)        
                 }  

            }

            this.fetchDate(1);
            
        },

        methods:{
            oneHourFn(data){
                var data1 = [];
                for(var i = 0; i < data.length; i++ ){
                    let c = data[i].childCatalogs;
                    for(let m = 0; m < c.length; m++) {

                        if(c && c[m] && c[m].childCatalogs && c[m].childCatalogs.length > 0) {

                            for(let j = 0; j < c[m].childCatalogs.length; j++ ){

                                if(c[m].childCatalogs[j].catalogCode == this.$route.params.catalogCode.replace('all','')) {
                                    
                                    //目前已经找到
                                    for(let k = 0; k < c.length; k++) {
                                        data1.push.apply(data1, c[k].childCatalogs)
                                    }

                                    break;
                                }

                            }

                        }
                    }
                }

                return data1;
            },
            dh(a){
                this.$nextTick(function(){
                   
                    if(this.changetabClick.length > 3) {
                    for(var j = 0; j < this.changetabClick.length; j++) {
                            if(this.changetabClick[j].catalogCode == this.$route.params.catalogCode) {
                                setTimeout(() => {
                                    var w = ($(window).width() - $('.select-down').width())/4;
                                    // console.log('宽度'+w, '第'+j+'位')
                                    $('.swiper-container.swiper-container-horizontal').css({
                                        'transform': 'translate3d('+(-j*w)+'px, 0px, 0px)'
                                    })

                                    if(a == 1 ){
                                        $('.swiper-container.swiper-container-horizontal .swiper-wrapper').addClass('swiper-wrapper1')
                                        setTimeout(() => {
                                            $('.swiper-container.swiper-container-horizontal').css({
                                            'transition': 'all 0.5s'
                                            })
                                        },100)
                                    }

                                     this.tabobj = {
                                        num: j,
                                        sw: w,
                                        len: this.changetabClick.length
                                     }
                                  
                                },100)
                                break;
                            }
                         }
                    }
                })
            },
            selectShow(){
                this.down = !this.down;
            },
            order(val){

                if(val.name != "price") {
                    this.orderAsc = '';
                    if(val.name == "comprehensive" && this.curr == '')return ;
                    if(val.name == this.curr)return ;
                }
                if(val && val.name == "price") {
                    if( this.orderAsc == "asc"  ) {
                        this.orderAsc = "desc"
                        val.orderAsc = "desc"
                    }else if(this.orderAsc == "desc" || this.orderAsc=='') {
                        this.orderAsc = "asc"
                        val.orderAsc = "asc"
                    }
                }
                this.curr = val.name;
                this.fetchDate(val)
            },
            fetchDate(val, old){
                this.dh()
                this.down = false;
                //全部    
                let catalogCode = this.$route.params.catalogCode

                if(/all/.test(catalogCode)) {
                    catalogCode = catalogCode.replace('all','');
                }

                var numdata;
                var boole = (toString.call(val) == "[object Object]") && (arguments.length == 1)//针对综合，销量，价格来的
                if(arguments.length == 2){//除了点击综合，销量，价格之外
                    this.curr = "comprehensive"
                    this.orderAsc=''
                }
                if( arguments.length == 2 || boole || val == 'all'){
                    this.listshopdata = [];
                    this.top = 0;
                    numdata = 1 //切换tab，现默认1 //只针对滚动的时候增加
                }else if(typeof val == "number"){
                    numdata = val //当页面滚动,和进来的时候
                } 
                if(this.$route.params.catalogCode != 'search') {
                    if(!!val && !!old && val.params.catalogCode == old.params.catalogCode ) return;//这是针对/100700/这种的，不是search的
                }

                if(toString.call(numdata) == "[object Undefined]") return;

                var data1 = {
                    data:{
                        cityCode: this.position.cityCode,
                        storeCode: this.position.storeLocation,
                        retailFormatTypes: -1,
                        orderBy: 0,
                        pageSize: 10,
                        pageNumber: numdata,
                        source: 'wap',
                        version: '3.2.2',
                        catalogCode: catalogCode,
                        _: Math.random()+10000000,
                        catalogSearch: 0,
                    },
                    jsonnum: this.jsonnum,
                 }
                // if(val === 1){//第一次进来的时候
                    // data1.data.retailFormatTypes = +this.$route.params.formatType
                    // data1.data.retailFormatTypes = -1
                 // }
                  if(/all/.test(this.$route.params.catalogCode)) {
                    data1.data.catalogSearch = 1
                  }
                
                 if(catalogCode == 'search') {

                    delete data1.data.catalogCode
                    data1.data.keyword = this.getshoplistNow;
                    // alert(this.getshoplistNow);
                    
                 }

                 if(boole && val.name){
                    data1.data.orderBy = val.orderBy
                    this.orderBy = val.orderBy
                 }

                 if(typeof val == "number" &&　this.orderBy != 0 ){　//滚动的时候
                    data1.data.orderBy = this.orderBy
                 }
                 if(typeof val == "number" && this.orderAsc){  //滚动的时候
                    data1.data.orderAsc = this.orderAsc
                 }

                 if(boole && val.name == "price"){
                    data1.data.orderAsc = val.orderAsc
                 }   
                 listshop(data1)
                 .then((json) => {
                    if(!json.resultData || !json.resultData.oneHourUp)return;
                    // console.log(this.formatTypes[this.$route.params.formatType]);
                    var listshopdata = json.resultData.oneHourUp.resultObject
                    // json.resultData[this.formatTypes[this.$route.params.formatType]].resultObject
                    var _that = this;
                    var shopcmmdtyCode= [];//商品编码集合，便于获取价格
                    
                    // if( this.$route.params.catalogCode == 'search'){
                    //     let data2 = json.resultData;
                    //     this.totalCount.oneHourUp = data2.oneHourUp.totalCount
                    //     this.totalCount.freshBook = data2.freshBook.totalCount
                    //     this.totalCount.superMarket = data2.superMarket.totalCount
                    // } 
                    if(!listshopdata){
                        this.noshop = true 
                        return
                    }else{
                        this.noshop = false
                    }
                    for(let i=0; i < listshopdata.length; i++) {
                        if(listshopdata[i].cmmdtyImageSrc == '0') {
                            listshopdata[i].src1 = img()+'/uimg/cmws/catentries/uimg/b2c/newcatentries/0000000000-' + listshopdata[i].cmmdtyCode +'_1_400x400.jpg'
                        }
                        else{
                            listshopdata[i].src1 = img()+'/uimg/cmws/catentries/'+listshopdata[i].cmmdtyCode+'_1_400x400.jpg'
                        }
                        let img1 = new Image();
                        img1.src = listshopdata[i].src1;
                        img1.onerror = function(){
                            _that.$set(listshopdata[i], 'src1', '/static/images/pro-default.png');
                        }
                        var cmmdtyCode = listshopdata[i].cmmdtyCode+'-'+listshopdata[i].supplierCode
                        shopcmmdtyCode.push(cmmdtyCode );
                    }
                    var totalPageCount = json.resultData.oneHourUp.totalPageCount;
                    if((val == 1 || arguments.length == 2) && (totalPageCount > 0)) {//只有刚进去和切换tab
                        this.totalPageCount =  totalPageCount//总页数
                    }


                   this.getPro(shopcmmdtyCode, listshopdata);//获取对应编码的价格数组
 
                   
                 });

                this.jsonnum++;
            },

            getPro(shopcmmdtyCode, listshopdata, totalPageCount){
                var num1 = parseInt(Math.random()*1000000);
               
                getprice({
                    cityCode: this.position.cityCode,
                    storeCode: this.position.storeLocation,
                    shopcmmdtyCode: shopcmmdtyCode,
                    num: num1,
                    app :'wap',
                    appVersion: '3.2.2'
                })
                .then((rep) => {

                      var pricedata;

                      if(pricedata = rep.resultData){

                            for(let i = 0; i < pricedata.length; i++){
                                if (parseFloat(pricedata[i].price) >0) {

                                    this.$set(listshopdata[i], 'price', pricedata[i].price);
                                    // alert(listshopdata[i].price)

                                    // 老价格大于新价格 展示老价格
                                    (pricedata[i].priceType==11 || pricedata[i].priceType==20 || pricedata[i].priceType==21||pricedata[i].priceType==22)&&parseFloat(pricedata[i].price) <= parseFloat(pricedata[i].basePrice) && this.$set(listshopdata[i], 'basePrice', pricedata[i].basePrice);
                                   
                                }else{

                                    this.$set(listshopdata[i], 'className1', 'item-noinv');
                                }
                                // if(pricedata[i].saleType !=0 || !pricedata[i].price || !pricedata[i]){
                                if(  !pricedata[i].price || !pricedata[i]){
                                    this.$set(listshopdata[i], 'className1', 'item-noinv');
                                }
                                 

                                parseFloat(pricedata[i].availableQty)<=0 && this.$set(listshopdata[i], 'className1', 'item-noinv');

                                switch (pricedata[i].priceType) {
                                    case "0":
                                        //小店普通商品
                                        this.$set(listshopdata[i], 'className', 'item-noinv');
                                        break;
                                    case "20":
                                        //中心仓普通商品
                                        this.$set(listshopdata[i], 'className', 'item-center');
                                        break;
                                    case "21":
                                        //大聚会
                                        this.$set(listshopdata[i], 'className', 'djh');
                                        break;
                                    case "22":

                                        //抢购
                                        this.$set(listshopdata[i], 'className', 'icon-qg');
                                        break;
                                }
                                if(pricedata[i].priceType == '22' || pricedata[i].priceType == '21') {
                                    //预热不可买
                                    if(pricedata[i].activityInfo && pricedata[i].activityInfo.actState == '1'){
                                            this.$set(listshopdata[i], 'className1', '');
                                    }
                                    //静默期
                                    if(pricedata[i].activityInfo && pricedata[i].activityInfo.actState == '5'){
                                        this.$set(listshopdata[i], 'className1', 'item-noinv');
                                    }
                                }
                                 
                                this.$set(listshopdata[i], 'priceType', pricedata[i].priceType);
                                this.$set(listshopdata[i], 'availableQty', pricedata[i].availableQty);

                            }

                             
                          
                            if(this.top == 0){
                                this._initScroll();
                            }
                            this.on = true; 
                      }

                    for(var i = 0; i < listshopdata.length; i++) {
                        if(!listshopdata[i].price){
                            this.$set(listshopdata[i], 'className', 'item-noinv');
                        }//为什么家这句话，接口返回的数据不统一，编码的10个会返回8个编码数据，数据都乱了
                        this.listshopdata.push( listshopdata[i] )
                    }
                       // this.listshopdata = listshopdata
                })
            },

            _initScroll(){
                var that = this;
                var totalPageCount1;
                var on = true;
                var num = 2;
                this.$refs.searchListWrap.onscroll = function(){
                    if(!totalPageCount1) {
                        totalPageCount1 = that.totalPageCount //滚动的总页数

                    }else if(totalPageCount1 > 0) {
                        that.top = this.scrollTop
                        if(num > totalPageCount1) return;
                        
                        if((this.children[0].offsetHeight - that.top <=  this.offsetHeight + 200) && that.on) {
                            that.on = false;
                            that.fetchDate(num)
                            num++;
                            
                        }

                    }
                }
            }
        },
        // mounted(){
        //     this.$nextTick(function(){
                
        //     })
        // },
        components:{
            swiper,
            swiperSlide,
            search
        }
    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>
.swiper-wrapper1 {
    transform: translate3d(0, 0, 0) !important;
 }  
</style>
<style lang="scss" scoped>
    .searchList-wrap a{
        color: #353d44;
     }
     .sn-tofixed {
        position: relative;
        width: 100%;
        z-index: 99;
        -webkit-transform: translate(0, 0);
        -webkit-transition: transform 0.5s;
        -ms-transform: translate(0, 0);
        transform: translate(0, 0);
        transition: -webkit-transform 0.5s;
        transition: transform 0.5s;
        transition: transform 0.5s, -webkit-transform 0.5s;
    }
    .sn-pro-scroll {
        background-color: #fff;
        position: relative;
        z-index: 2;
        transition:height 0.2s;
    }
    .sn-tofixed .sn-nav {
        position: relative;
        width:13.4rem;
        overflow: hidden;
        height: 1.6rem;
        background-color: #fff;
        border-bottom: 1px solid #f0f0f0;
        z-index: 2;
        float: left;
    }
    .sn-tofixed .sn-nav.w100 {
        width: 100%;
    }
    .sn-tofixed .sn-nav li {
        display: inline-block;
        text-align: center;
        -webkit-flex: 1;
        -ms-flex: 1;
        flex: 1;
        height: 1.6rem;
        line-height: 1.6rem;
        min-width: 2.8rem;
    }
    .sn-tofixed .sn-nav li.curr a {
        padding: 0 0.2rem;
        color: #ff782d;
        border-bottom: 2px solid #ff782d;
        max-width: 4rem;
        overflow: hidden;
    }
    .sn-tofixed .sn-nav li a {
        display: inline-block;
        height: 1.6rem;
        line-height: 1.6rem;
        font-size: .52rem;
        color: #353d44;
    }
    .sn-tofixed .sn-ops {
        position: relative;
        height: 1.44rem;
        background-color: rgb(255,255,255);
        font-size: .56rem;
        color: #666;
        box-shadow: 0px 5px 20px #E8E7E7;
        -webkit-transform: translate(0, 0);
        -ms-transform: translate(0, 0);
        transform: translate(0, 0);
        transition: -webkit-transform 0.5s;
        transition: transform 0.5s;
        transition: transform 0.5s, -webkit-transform 0.5s;
        z-index: 0;
    }
    .sn-tofixed .sn-ops .sn-sort {
        width: 15rem;
        height: 1.44rem;
        overflow: hidden;
        display: inline-block;
        float: left;
    }
    .sn-tofixed .sn-ops li {
        float: left;
        width: 33.3%;
        text-align: center;
        line-height: 1.44rem;
        margin: 0;
    }
    .sn-tofixed .sn-ops li.curr {
        color: #ff782d;
    }
    .sn-tofixed .sn-ops .price-sort .top {
        content: '';
        position: absolute;
        width: 0;
        height: 0;
        border-left: .18rem solid transparent;
        border-right: .18rem solid transparent;
        border-bottom: .18rem solid #666;
        left: 50%;
        margin-left: .7rem;
        top: .5rem;
    }
    .sn-tofixed .sn-ops .price-sort {
        position: relative;
    }
    .sn-tofixed .sn-ops .price-sort .bottom {
        content: '';
        position: absolute;
        width: 0;
        height: 0;
        border-left: .18rem solid transparent;
        border-right: .18rem solid transparent;
        border-top: .18rem solid #666;
        left: 50%;
        top: .8rem;
        margin-left: .7rem;
    }
    .searchList-wrap {
        width: 100%;
        height: 25.3rem;
        overflow-y: auto;
        -webkit-transform: translate(0, 0);
        -ms-transform: translate(0, 0);
        transform: translate(0, 0);
        transition: -webkit-transform 0.5s;
        transition: transform 0.5s;
        transition: transform 0.5s, -webkit-transform 0.5s;
        -webkit-overflow-scrolling: touch;
        overflow-scrolling: touch;
        background-color: #fff;
    }
    .thum-style {
        padding-bottom: 8rem;
    }
    .thum-style .list-datail {
        padding: 0;
        margin: 0;
        float: left;
        width: 50%;
        height: 7.5rem;
        position: relative;
        border-bottom: 1px solid #f7f7f7;
        border-right: 1px solid #f7f7f7;
    }
    .thum-style .list-datail .o-index-pro-pic {
        width: 100%;
        height: 4.8rem;
        margin-top: .4rem;
    }
    .thum-style .list-datail .o-index-pro-pic a {
        display: block;
        position: relative;
        width: 100%;
        height: 4.8rem;
        margin: 0 auto;
    }
    .thum-style .list-datail .o-index-pro-pic img {
        display: block;
        width: 4.8rem;
        height: 4.8rem;
        margin: 0 auto;
    }
    .sn-tofixed .showout {
        height: 0;
        overflow: hidden;
    }
    .thum-style .list-datail .o-pro-info {
        margin: .2rem .32rem;
        font-size: .52rem;
        text-align: center;
        color: #444;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    } 
    .thum-style .list-datail .qa-price span.no-line {
        text-decoration: none;
    }
    .thum-style .list-datail .qa-price span.sendFlagStr {
        display:inline-block;
        margin-left: 0.24rem;
        padding: 0 0.24rem;
        font-size: 0.36rem;
        color: #ff782d;
        border: 1px solid #ff782d;
        border-radius: 100px;
        text-align: center;
        line-height: 0.5rem;
    }
    .thum-style .list-datail .qa-price {
        margin: 0rem .32rem;
        line-height: .72rem;
        font-size: .6rem;
        color: #f5a623;
        text-align: center;
        overflow: visible !important;
        .yen {
            font-size: .44rem;
        }
    }
    .swiper-container.swiper-container-horizontal {
         width: 100%;
         overflow: visible; 
    }
    .thum-style .list-datail.item-noinv .o-index-pro-pic a:before {
        position: absolute;
        content: '';
        top: 50%;
        left: 50%;
        -webkit-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
        width: 2.72rem;
        height: 2.72rem;
        background: url('/static/images/soldout.png');
        background-size: 100% 100%;
    }
    .thum-style .list-datail .o-index-pro-pic a:after {
        display: block;
        width: 2rem;
        height: 2rem;
        position: absolute;
        right: 0.2rem;
        top: 0.2rem;
    }
    .thum-style .list-datail.djh .o-index-pro-pic a:after {
        content: " ";
        background: url() 0 0 no-repeat;
        background-size: 100%;
    }
    .thum-style .list-datail.icon-qg .o-index-pro-pic a:after {
        content: " ";
        background: url('/static/images/qianggou.png') 0 0 no-repeat;
        background-size: 100%;
    }
    .child-view {
        overflow: hidden;
    }
    .thum-style .list-datail .qa-price span {
        font-weight: normal;
        color: #bbb;
        font-size: .48rem;
        text-decoration: line-through;
    }
    .sn-tofixed .sn-ops .priceAsc .top {
        border-bottom: .18rem solid #fa0;
    }
    .sn-tofixed .sn-ops .priceDesc .bottom {
        border-top: .18rem solid #fa0;
    }
    .list-search .sn-search {
        position: relative;
        height: 1.36rem;
        padding: .28rem .56rem;
        background-color: #fff;
    }
    .list-search .sn-search .sn-se-inp {
        position: relative;
        background-color: #f0f0f0;
        border-radius: 1.12rem;
        height: 1.12rem;
        padding: .16rem .2rem 0rem 1.12rem;
    }
   
    .list-search .sn-search .sn-se-inp input {
        width: 100%;
        height: .8rem;
        border: none;
        background: none;
        color: #333;
    }
    .list-search .sn-search .search-btn {
        display: none;
        position: absolute;
        top: .28rem;
        right: .56rem;
        height: 1.2rem;
        line-height: 1.2rem;
        font-size: .56rem;
        color: #ff782d;
    }
    .list-search .sn-search-tofixed .sn-nav {
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        position: relative;
        height: 1.6rem;
        background-color: #fff;
        border-bottom: 1px solid #f0f0f0;
        padding: 0 .2rem;
        z-index: 2;
    }
    .list-search  .sn-nav li {
        text-align: center;
        -webkit-flex: 1;
        -ms-flex: 1;
        flex: 1;
        height: 1.6rem;
        line-height: 1.6rem;
        min-width: 2.8rem;
    }
    .select-down {
        position: relative;
        float: left;
        width: 1.6rem;
        height: 1.6rem;
        border-bottom: 1px solid #f0f0f0;
        box-sizing: content-box;
        background-image: url('/static/images/group_1.png');
        background-size: 100% 96%;
        background-position: 0 2px;
    }
    .select-down.active {
         background-image: url('/static/images/group_2.png');
    }
    /*.select-down .line {
        position: absolute;
        left: 1px;
        top: 20%;
        height: 60%;
        width: 2px;
        border-radius:8px 0 0 8px;
        background-color: rgba(0, 0, 0, 0.07);
    }*/
    .shoplist-poxf {
        position: relative;
        z-index: 111111;
    }
    .select-show {
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        z-index: 1111;
    }
    .select-mask {
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        z-index: 11;
        height:23.3rem;
        background-color: rgba(0, 0, 0, 0.1);
        touch-acion:none;
    }
    .select-show ul{
        background-color: #f9f9f9;
        overflow: hidden;
        min-height:1.44rem;
    }
    .select-show ul li {
        width: 25%;
        float:left;
        height:1.44rem;
        line-height: 1.44rem;
        text-align: center;
    }
    .select-show ul li.curr a{
        color: #ff782d;
    }
    .select-show ul li a{
        display: inline-block;
        color: #353d44;
    }
    .rotate_180 {
        display: inline-block;
        transform: rotate(180deg);
        -ms-transform: rotate(180deg);     /* IE 9 */
        -moz-transform: rotate(180deg);    /* Firefox */
        -webkit-transform: rotate(180deg); /* Safari 和 Chrome */
        -o-transform: rotate(180deg); 
    }
    .shoplist-nosale{
        position: fixed;
        left: 50%;
        top: 35%;
        margin-top: -3.5rem;
        margin-left: -3.5rem;
        width: 7rem;
        text-align: center;
    }
    .shoplist-nosale p {
        font-size: 13px;
        color: #666;
    }
    .noshop-button {
        display: inline-block;
        margin-top: 0.4rem;
        width: 90%;
        height: 1.5rem;
        line-height: 1.5rem;
        border: 1px solid #ff782d;
        border-radius: 2rem;
        color: #ff782d !important;
    }
    .sn-search {
      position: relative;
      height: 1.76rem;
      padding: .28rem .56rem;
      background-color: #fff;
      border-bottom: 1px solid #e7e7e7;
  }
  .sn-search .sn-se-inp {
    position: relative;
    background-color: #f0f0f0;
    border-radius: 1.2rem;
    height: 1.2rem;
    padding: .2rem .2rem .2rem 1.12rem;
  }
  .sn-search .sn-se-inp .search-icon {
      display: inline-block;
      position: absolute;
      left: .4rem;
      top: 50%;
      -webkit-transform: translateY(-50%);
      width: .56rem;
      height: .56rem;
      background:url() 0 center no-repeat;
      background-size: contain;
  }
  .sn-search .sn-se-inp input {
    width: 100%;
    height: .8rem;
    border: none;
    background: none;
    color: #333;
  }
  .sn-search .search-btn {
      display: inline-block;
      position: absolute;
      top: .28rem;
      right: .56rem;
      height: 1.2rem;
      line-height: 1.2rem;
      font-size: .6rem;
      color: #ff782d;
  }
  .sn-tofixed .sn-nav .silder-li-1 {
    width: 50% !important;
 } 
 .sn-tofixed .sn-nav .silder-li-2 {
    width: 33.33% !important;
 } 
 .sn-tofixed .sn-nav .silder-li-3 {
    width: 25% !important;
 }  

 
</style>
